<template>
	<view class="container">
		<!-- 头部已解锁的四个盒子 -->
		<view class="top">
			<view class="top-one">
				<view class="jinxingzhong">
					<image src="../../static/jinxingzhong.png" mode="widthFix"></image>
				</view>
				<navigator url="luxian2"><image src="../../static/ruijin.jpg" mode="widthFix"></image></navigator>
				<p>长征路线</p>
			</view><!--top-one-->
			<view class="footers">
				<view class="footer-one">
					<image src="../../static/ruijin.jpg" mode="widthFix"></image>
					<p>重大会议路线</p>
				</view>
				<view class="suo">
					<image src="../../static/dati-suo.png" ></image>
				</view>
			</view>
		</view><!--top-->
		<!-- 尾部未解锁的四个盒子 -->
		<view class="footer">
			<view class="footers">
				<view class="footer-one">
					<image src="../../static/ruijin.jpg" mode="widthFix"></image>
					<p>重大战役路线</p>
				</view>
				<view class="suo">
					<image src="../../static/dati-suo.png" ></image>
				</view>
			</view>
			<view class="footers">
				<view class="footer-one">
					<image src="../../static/ruijin.jpg" mode="widthFix"></image>
					<p>路线4</p>
				</view>
				<view class="suo">
					<image src="../../static/dati-suo.png" ></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footers">
				<view class="footer-one">
					<image src="../../static/ruijin.jpg" mode="widthFix"></image>
					<p>路线5</p>
				</view>
				<view class="suo">
					<image src="../../static/dati-suo.png" ></image>
				</view>
			</view>
		</view>
	</view><!--container-->
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.container{padding:10px;}
/* 头部已解锁的四个盒子 */
.top{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;}
.top-one{border:1px solid #666;width:50%;padding:14px 14px 0 14px;box-sizing:border-box;border-radius:10px;position:relative;margin-right:10px;}
.top-one:last-child{margin-right:0;}
.top-one image{width:100%;text-align:center;}
.top-one p{text-align:center;line-height:25px;}
.jinxingzhong image{width:20%;height:20%;position: absolute;top:-2px;right:-2px;border-radius:10px;}
/* 尾部未解锁的四个盒子 */
.footer{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:20px;}
.footer:last-child{margin-bottom:0;}
.footers{width:50%;position:relative;margin-right:10px;}
.footers:last-child{margin-right:0;}
.footer-one{padding:14px 14px 0 14px;box-sizing:border-box;border-radius:10px;}
.footer-one image{width:100%;text-align:center;}
.footer-one p{text-align:center;line-height:25px;}
.suo{background-color:rgba(0, 0, 0, 0.5);position:absolute;top:0;left:0;z-index:1000;border-radius:10px;width:100%;height:100%;}
.suo image{width:60px;height:60px;margin-left:30%;margin-top:15%;}
</style>
